<template>
  <div id="map_cn"></div>
</template>

<script>
import * as echarts from "echarts";
import "../../utils/china.js"; //这一步必须引入
import { getUser } from "@/api/home.js";
import dot from "@/assets/images/map.png"; // 要使用import的方式引入图片，不支持直接写图片路径

export default {
  data() {
    return {
      //地图中的数据
      dataList: [
        {
          name: "南海诸岛",
          value: 25,
        },
        {
          name: "北京",
          value: 71,
        },
        {
          name: "天津",
          value: 52,
        },
        {
          name: "上海",
          value: 14,
        },
        {
          name: "重庆",
          value: 50,
        },
        {
          name: "河北",
          value: 20,
        },
        {
          name: "河南",
          value: 30,
        },
        {
          name: "云南",
          value: 55,
        },
        {
          name: "辽宁",
          value: 50,
        },
        {
          name: "黑龙江",
          value: 40,
        },
        {
          name: "湖南",
          value: 6,
        },
        {
          name: "安徽",
          value: 96,
        },
        {
          name: "山东",
          value: 75,
        },
        {
          name: "新疆",
          value: 45,
        },
        {
          name: "江苏",
          value: 15,
        },
        {
          name: "浙江",
          value: 8,
        },
        {
          name: "江西",
          value: 78,
        },
        {
          name: "湖北",
          value: 78,
        },
        {
          name: "广西",
          value: 36,
        },
        {
          name: "甘肃",
          value: 25,
        },
        {
          name: "山西",
          value: 140,
        },
        {
          name: "内蒙古",
          value: 85,
        },
        {
          name: "陕西",
          value: 85,
        },
        {
          name: "吉林",
          value: 74,
        },
        {
          name: "福建",
          value: 20,
        },
        {
          name: "贵州",
          value: 74,
        },
        {
          name: "广东",
          value: 47,
        },
        {
          name: "青海",
          value: 45,
        },
        {
          name: "西藏",
          value: 41,
        },
        {
          name: "四川",
          value: 3,
        },
        {
          name: "宁夏",
          value: 7,
        },
        {
          name: "海南",
          value: 7,
        },
        {
          name: "台湾",
          value: 200,
        },
        {
          name: "香港",
          value: 2,
        },
        {
          name: "澳门",
          value: 5,
        },
      ],
      //指定图表的配置项和数据
      option: {
        color: {
          image: this.$refs.mapSvg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
          repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        },
        //标题组件
        title: {},
        //提示框组件
        tooltip: {
          show: true,
          //触发类型：数据项图形触发
          trigger: "item",
          padding: 0,
          borderWidth: 1,
          borderColor: "#005583",
          // backgroundColor: "rgba(255,255,255,0.4)",
          backgroundColor: "rgba(50,50,50,0)", // tooltip默认背景为白色，手动置为透明
          textStyle: {
            color: "#009FCE",
            fontSize: 12,
          },
          //提示框内容格式器
          formatter: (e) => {
            let data = e.data;
            //此处将各等级景点数量表示为0-10内的随机整数
            // data.one = Math.random() * 10 | 0;
            data.userDoctor = this.mapUser.userDoctor || 0;
            data.userApp = this.mapUser.userApp || 0;
            data.userTv = this.mapUser.userTv || 0;
            data.userPad = this.mapUser.userPad || 0;
            //字符串模板
            let context = `
               <div style="background: radial-gradient(circle, #00152E, #003455); padding: 8px;">
                   <p><span>省份 </span><span>${data.name}</span></p>
                   <p><span>医生人数 : </span><span>${data.userDoctor}</span></p>
                   <p><span>个人人数 : </span><span>${data.userApp}</span></p>
                   <p><span>电视人数 : </span><span>${data.userTv}</span></p>
                   <p><span>pad人数 : </span><span>${data.userPad}</span></p>
               </div>
            `;
            return context;
          },
        },
        //视觉映射组件(左下角)
        visualMap: {
          show: false,
          left: 26,
          bottom: 40,
          showLabel: true,
          // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
          calculable: false,
          // 拖拽时，是否实时更新
          realtime: true,
          align: "left",
          //各颜色代表的区域
          pieces: [
            {
              gte: 100,
              label: "> 100",
              color: "#1e51a1",
            },
            {
              gte: 50,
              lt: 99,
              label: "50 - 99",
              color: "#1e51a1",
            },
            {
              gte: 30,
              lt: 49,
              label: "30 - 49",
              color: "#4d6db4",
            },
            {
              gte: 10,
              lt: 29,
              label: "10 - 29",
              color: "#5a78ba",
            },
            {
              lt: 9,
              label: "< 10",
              color: "#5384c3",
            },
          ],
        },
        //地理坐标系组件
        geo: [
          {
            zlevel: 2,
            //使用 registerMap 注册的地图名称
            map: "china",
            //是否开启鼠标缩放和平移漫游
            // roam: true,
            //当前视角缩放比例
            zoom: 1.24,
            // aspectScale: 0.8, // 地图倾斜度
            //滚轮缩放的极限控制
            // scaleLimit: {
            //   min: 1, //最小1倍
            //   max: 3 //最大3倍
            // },
            //地图组件离容器的距离
            top: 60,
            left: 80,
            // left: 'center',
            //图形上的文本标签
            label: {
              show: false,
              fontSize: "11",
            },
            //地图区域的多边形 图形样式
            itemStyle: {
              normal: {
                areaColor: "#0B2E75",
                borderWidth: 0.5, //设置外层边框
                borderColor: "#85FFFF",
              },
              // shadowColor: "rgba(0, 0, 0, 0.2)",
              shadowBlur: 10,
              // 高亮状态(鼠标移入后)的多边形和标签样式
              emphasis: {
                areaColor: "#85FFFF",
                shadowOffsetX: 2,
                shadowOffsetY: 2,
                borderWidth: 0, //设置外层边框
              },
            },
            //重点下面，与点击事件不同，虽然也是点击选中，但是事件不一样
            selectedMode: "single", //选择模式，单选，只能选中一个地市
            select: {
              //这个就是鼠标点击后，地图想要展示的配置
              disabled: false, //可以被选中
              itemStyle: {
                //相关配置项很多，可以参考echarts官网
                areaColor: "#85FFFF", //选中
                normal: {
                  borderWidth: 0, //设置外层边框
                },
              },
            },
          },
          {
            //使用 registerMap 注册的地图名称
            map: "china",
            //是否开启鼠标缩放和平移漫游
            // roam: true,
            //当前视角缩放比例
            zoom: 1.24,
            // aspectScale: 0.8, // 地图倾斜度
            //滚轮缩放的极限控制
            // scaleLimit: {
            //   min: 1, //最小1倍
            //   max: 3 //最大3倍
            // },
            //地图组件离容器的距离
            top: 60,
            left: 80,
            // left: 'center',
            //图形上的文本标签
            label: {
              show: false,
              fontSize: "11",
            },
            //地图区域的多边形 图形样式
            itemStyle: {
              normal: {
                borderWidth: 3, //设置外层边框
                borderColor: "#85FFFF",
              },
              shadowColor: "rgba(0, 0, 0, 0.2)",
              shadowBlur: 10,
              // 高亮状态(鼠标移入后)的多边形和标签样式
              emphasis: {
                areaColor: "#85FFFF",
                shadowOffsetX: 2,
                shadowOffsetY: 2,
              },
            },
            //重点下面，与点击事件不同，虽然也是点击选中，但是事件不一样
            selectedMode: "single", //选择模式，单选，只能选中一个地市
            select: {
              //这个就是鼠标点击后，地图想要展示的配置
              disabled: false, //可以被选中
              itemStyle: {
                //相关配置项很多，可以参考echarts官网
                areaColor: "#85FFFF", //选中
              },
            },
          },
        ],
        series: [
          {
            type: "map",
            roam: true,
            geoIndex: 0,
            data: "",
            label: {
              show: true,
            },
          },
        ],
      },
      // 省份
      prov: "",
      // 地图数据
      mapUser: {},
    };
  },
  watch: {
    prov(val, oldVal) {
      getUser({ address: val }).then((res) => {
        if (res.code == 200) {
          this.mapUser = res.data;
          this.dataList.forEach((item, index) => {
            if (item.name == this.prov) {
              this.dataList[index].userDoctor = this.mapUser.userDoctor;
              this.dataList[index].userApp = this.mapUser.userApp;
              this.dataList[index].userTv = this.mapUser.userTv;
              this.dataList[index].userPad = this.mapUser.userPad;
            }
          });
        }
      });
    },
  },

  methods: {
    //定义方法 draw_map 绘制中国地图
    draw_map() {
      let myChart = this.$echarts.init(document.getElementById("map_cn"));
      // 图形纹理
      const imageDom = document.createElement("img");
      imageDom.src = "@/assets/images/map.png";
      // var imageSrc = "@/assets/images/map.png"
      // var patternImg = new Image();
      // patternImg.src = imageSrc;
      //显示地图
      myChart.setOption(this.option);
      let that = this;
      myChart.on("click", function (params) {
        // const idx = params.dataIndex;
        // console.log(idx, params.name, params.value);
        that.prov = params.name;
        // that.$emit("provMap", that.prov);
      });
      myChart.on("mouseover", function (params) {
        that.prov = params.name;
        // that.$emit("provMap", that.prov);
      });
    },
    //修改echart配制
    setEchartOption() {
      this.option.series[0].data = this.dataList;
    },
  },
  created() {
    this.setEchartOption();
  },
  mounted() {
    this.$nextTick(() => {
      this.draw_map();
    });
  },
};
</script>

<style lang="scss" scoped>
#map_cn {
  width: 100%;
  height: 100%;
  // height: 36.875rem;
  // background-color: #eaeaea;
  // margin: auto;
  // margin-left: -2rem;
}
</style>
